<template>
  <div class="main-app">
    <el-form ref="form" :model="form" :rules="rules" style="width: 40%;margin-left: 30%;">
      <el-form-item v-if="id !== ''" label="仓库编号:" prop="name" >
        <el-input v-model="form.number" disabled />
      </el-form-item>
      <el-form-item label="仓库名称:" prop="name" >
        <el-input v-model="form.name" disabled />
      </el-form-item>
      <el-form-item label="仓库类型:" prop="type" >
        <el-select v-model="form.type" placeholder="请选择仓库类型" style="width: 100%" disabled>
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" clearable />
        </el-select>
      </el-form-item>
      <el-form-item label="仓库容量:" prop="totalCapacity" >
        <el-input v-model="form.totalCapacity" type="number" disabled />
      </el-form-item>
      <el-form-item label="负责人:" prop="personId" >
        <el-select v-model="form.personId" placeholder="请选择负责人" style="width: 100%" disabled>
          <el-option v-for="item in personIdOptions" :key="item.guid" :label="item.name" :value="item.guid" />
        </el-select>
      </el-form-item>
      <el-form-item label="批次:" >
        <el-input v-model="form.batch" disabled />
      </el-form-item>
      <el-form-item label="仓库面积:" >
        <el-input v-model="form.area" disabled />
      </el-form-item>
    </el-form>
    <el-row style="margin-top: 40px; text-align: center">
      <el-form :inline="true" class="form-inline">
        <el-form-item>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>

<script>
  import {
    WarehouseCategory
  } from "../../../../utils/resource";
  import {
    getUserByEnterpriseId
  } from "../../../../api/user";
  import {
    save,
    getWareHouseById
  } from "../../../../api/warehouse";
  export default {
    data() {
      return {
        form: {
          type: "",
          name: "",
          totalCapacity: "",
          personId: "",
          orgName: "",
          batch: "",
          area: "",
          number: "",
        },
        options: WarehouseCategory,
        personIdOptions: [],
        rules: {
          totalCapacity: [{
            required: true,
            message: "请输入仓库容量",
            trigger: "blur"
          }, ],
          name: [{
            required: true,
            message: "请输入仓库名称",
            trigger: "blur"
          }],
          type: [{
            required: true,
            message: "请选择仓库类型",
            trigger: "change"
          }, ],
          personId: [{
            required: true,
            message: "请选择负责人",
            trigger: "change"
          }, ],
        },
        id: "",
        enterpriseId: "",
      };
    },
    computed: {
      isView() {
        return this.$route.name === "view";
      },
    },
    async created() {
      const {
        id,
        code
      } = this.$route.params;
      let param = { //只有查询指定组织ID的用户时候才传，否则可以通过token获取登录人组织ID自动获取
        OrgGuid: id
      }
      console.log(param);
      const {
        data
      } = await getUserByEnterpriseId(param);
      this.personIdOptions = data;

      this.enterpriseId = id;
      if (!code) {
        if (data != null) {
          for (const p of data) {
            if (p.orgRemarks !== null) {
              this.form.orgName = p.orgRemarks;
              break;
            }
          }
        }
      } else {
        this.id = code;
        await this.getWareHouseById(code);
      }
    },
    methods: {
      async getWareHouseById(id) {
        const {
          data
        } = await getWareHouseById(id);
        this.form.name = data.name;
        this.form.type = data.type;
        this.form.personId = data.personId;
        this.form.totalCapacity = data.totalCapacity.toString();
        this.form.orgName = data.orgName;
        this.form.batch = data.batch;
        this.form.area = data.area;
        this.form.number = data.number;
      },
      save() {
        this.$refs["form"].validate(async (valid) => {
          if (valid) {
            const person = this.personIdOptions.find(
              (p) => p.guid === this.form.personId
            ).name;
            let data = {
              name: this.form.name,
              type: this.form.type,
              personId: this.form.personId,
              personName: person,
              totalCapacity: this.form.totalCapacity,
              orgName: this.form.orgName,
              batch: this.form.batch,
              area: this.form.area,
            };
            let message = "";
            if (!this.id) {
              message = "新增";
            } else {
              data = Object.assign({
                id: this.id
              }, data);
              message = "修改";
            }
            await save(data);
            this.$notify({
              title: "成功",
              message: `仓库${message}成功`,
              type: "success",
              duration: 3000,
            });
            this.$router.push(
              `/organization/accept/warehouse/${this.enterpriseId}`
            );
          }
        });
      },
      cancel() {
        this.$router.push(
          `/organization/accept/warehouse/${this.enterpriseId}`
        );
      },
    },
  };
</script>
